<template>
  <div class="contain">
    <!-- 类想标题 -->
    <div class="title">{{ msg }}</div>
    <!-- 异常信息列表内容 -->
    <div class="list">
      <mt-loadmore 
    :top-method="loadTop" 
    :bottom-method="loadBottom" 
    :bottom-all-loaded="allLoaded"
    ref="mt"
    
     :auto-fill="false">
    <ul>
      <li v-for="(item) in tableData" :key="item.Id" class="fire">
        <!-- 异常时间 -->
        <p>
          <span class="warning">异常时间：{{item.Time}}</span>
        </p>
         <!-- 异常类型 -->
        <p>
          <span>异常类型：</span>{{item.Detail}}</p>
           <!-- 异常级别 -->
        <p>
          <span>异常级别：</span>{{item.Rank}}</p>
           <!-- 此刻伐值 -->
        <p>
          <span>此刻伐值：</span>{{item.CurrenLevel}}</p>
          <!-- 正常范围 -->
        <p>
          <span>正常范围：</span>{{item.Range}}</p>
          <!-- 处理建议 -->
        <p>
          <span>处理建议：</span>{{item.ManageSuggest}}</p>
      </li>
    </ul>
    </mt-loadmore>
    </div>
  </div>
</template>

<script>
// 引入vue 辅助函数
import { mapMutations } from "vuex";
export default {
  name: "fire",
  data() {
    return {
      msg: "消防警报",
     tableData: [],
       currentPage:1,
      pageSize:10,
      allLoaded:false
    };
  },
  methods: {
    // 隐射方法调用为store.commit
    ...mapMutations(["clearMesNumber"]),
    // 请求异常信息类表的数据
    myAjax(type){
     var that = this;
    var url = api + "/api/Warehouse/GetFires";
     switch(type){
       case "top":
      //  上拉加载第一页
       that.currentPage = 1;
       break;
      case "bottom":
       that.currentPage += 1;
       break;
     }
      $.ajax({
      type: "GET",
      url: url,
      dataType: "json",
     /*   xhrFields: {
          withCredentials: true
       },
       crossDomain: true, */
      data: {
        p: that.currentPage,
        size: that.pageSize,
        token:JSON.parse(localStorage.getItem("token"))
      },
      success: function(result) {  
        console.log("档案出入库：", result);
          if(result.state == -1){
            alert(result.message)
            // token 失效重新登录
           that.$router.push("/login");
          }else{
                   // 请求成功展示列表
        switch(type){
          case "top":
          // 隐藏上拉加载的内容
          that.$refs.mt.onTopLoaded();
          that.tableData = result;
           // 上拉刷新以后设置异常消息数量为0
          that.clearMesNumber("fire");
          break;

          case "bottom":
          // 隐藏下拉刷新的内容
           that.$refs.mt.onBottomLoaded();
           if(result.length == 0){
            //  如果无数据，禁止下拉刷新
              this.allLoaded = true;
           }else{
             that.tableData.push(...result);
           }
           
          break;
        }
          }
     
      },
      error: function(error) {
        // 请求失败提示信息
        alert("系统异常");
      }
    });
    },
    loadTop(id){
      console.log("this.pageSize:",this.currentPage);
      this.myAjax("top");
    },
    loadBottom(){
      this.myAjax("bottom");
    }
  },
  created() {
    var that = this;
   
    this.myAjax("top");
  },
  mounted() {
    this.clearMesNumber("fire");
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.fire {
  width: 96%;
  border: 1px solid rgba(0, 0, 0, 0.125);
  margin: 5% 2%;
  border-radius: 5px;
  background: #fff;
  padding: 10px;
  p {
    border-bottom: 1px dashed #ccc;
  }
  &:hover {
    box-shadow: -2px 0 46px -5px #9e9c9e;
  }
  span {
    font-size: 18px;
    display: inline-block;
    text-align: left;
  }
}
</style>
